import { defineComponent, ExtractPropTypes } from 'vue'
import { extractStrings } from '../../utils'
import { useIconConfig } from './hooks/useIconConfig'
import symbols from './_symbols'

const reg = /<symbol id="(.*?)"/g
export const iconList = extractStrings(reg, symbols)

const iconProps = {
  name: {
    type: String,
    required: true
  },
  size: {
    type: Number
  }
} as const

export type IconProps = Partial<ExtractPropTypes<typeof iconProps>>

export default defineComponent({
  name: 'SpsIcon',
  props: iconProps,
  setup(props, { attrs }) {
    const iconConfig = useIconConfig()
    /* render 函数 */
    return () => {
      // @ts-ignore
      const { name, size } = props
      const sizeValue = `${(size || iconConfig.size) * 0.25}rem`
      return (
        <svg
          class="sps-icon"
          style={{ width: sizeValue, height: sizeValue }}
          {...attrs}>
          <use href={`#${name}`} />
        </svg>
      )
    }
  }
})
